<template>
  <div class="home">
    <el-row :gutter="20">
      <!-- 左边区域 -->
      <el-col :span="8">
        <el-card shadow="always" class="avgcard">
          <div class="shang">
            <div class="img-box">
              <img src="https://thirdqq.qlogo.cn/g?b=sdk&k=5icaV1CUCWlRmYT9BiaNSdmw&s=100&t=1612878301" width="160px"/>
            </div>
            <div class="font-box">
              <h2>Admin</h2>
              <h5 style="color:#7e7a7a">超级管理员</h5>
            </div>
          </div>
          <hr />
          <div class="xia">
            <div class="logintime">上次登陆时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              2022-07-26</div>
            <div class="loginaddress">上次登陆地点：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              四川-成都</div>
          </div>
        </el-card>
        <el-card shadow="always" class="shop-table">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              :prop="item.value"
              :label="item.name"
               v-for="(item,index) in tableHeader" :key="index">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 右边区域 -->
      <el-col :span="16">
        <!-- 总览数据 -->
        <div class="orderdata">
          <el-card v-for="(item,index) in orderData" :key="index" :body-style="{display:'flex',padding:0}" class="card">
            <i :class="item.icon" :style="{background:item.bgcolor}" class="icon"></i>
            <div class="detail">
              <h3>￥{{item.money}}</h3>
              <h5>{{item.name}}</h5>
            </div>
          </el-card>
        </div>
        <!-- 折线图 -->
        <el-card class="linechart">
          <LineChart></LineChart>
        </el-card>
        <div class="barpie">
          <el-card class="barchart">
            <BarChart></BarChart>
          </el-card>
          <el-card class="piechart">
            <PieChart></PieChart>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getHomeData,getHomeDatapost} from '@/api/home'
import LineChart from '@/components/LineChart.vue'
import BarChart from '@/components/BarChart.vue'
import PieChart from '@/components/PieChart.vue'
export default { 
  name:'Home',
  components:{LineChart,BarChart,PieChart},
  data(){
    return {
      // 表格数据
      tableData:[
        {
          goods: '小米',
          selltoday: '28',
          sellmonth: '609',
          selltotal: '1090'
        },
        {
          goods: '华为',
          selltoday: '8',
          sellmonth: '240',
          selltotal: '890'
        },
        {
          goods: '苹果',
          selltoday: '12',
          sellmonth: '399',
          selltotal: '997'
        },
        {
          goods: 'OPPO',
          selltoday: '12',
          sellmonth: '399',
          selltotal: '997'
        },
        {
          goods: '魅族',
          selltoday: '12',
          sellmonth: '399',
          selltotal: '997'
        },
        {
          goods: 'ROG',
          selltoday: '12',
          sellmonth: '399',
          selltotal: '997'
        },
        {
          goods: '努比亚',
          selltoday: '8',
          sellmonth: '199',
          selltotal: '297'
        },
        {
          goods: 'realme',
          selltoday: '19',
          sellmonth: '460',
          selltotal: '1097'
        },
        {
          goods: '三星',
          selltoday: '16',
          sellmonth: '489',
          selltotal: '997'
        },
      ],
      // 表头数据
      tableHeader:[
        {
          name:'商品',
          value:'goods'
        },
        {
          name:'今日售出',
          value:'selltoday'
        },
        {
          name:'本月售出',
          value:'sellmonth'
        },
        {
          name:'总计售出',
          value:'selltotal'
        }
      ],
      // 订单数据
      orderData:[
        {
          icon:'el-icon-circle-check',
          bgcolor:'#24b7cd',
          name:'今日支付订单',
          money:'1479'
        },
        {
          icon:'el-icon-star-off',
          bgcolor:'#ffbc7e',
          name:'今日收藏订单',
          money:'930'
        },
        {
          icon:'el-icon-goods',
          bgcolor:'#52acf4',
          name:'今日未支付订单',
          money:'2042'
        },
        {
          icon:'el-icon-circle-check',
          bgcolor:'#24b7cd',
          name:'本月支付订单',
          money:'2204'
        },
        {
          icon:'el-icon-star-off',
          bgcolor:'#ffbc7e',
          name:'本月收藏订单',
          money:'1080'
        },
        {
          icon:'el-icon-goods',
          bgcolor:'#52acf4',
          name:'本月未支付订单',
          money:'4542'
        }
      ]
    }
  },
  mounted(){
    let obj = {
      name:'zs'
    }
    getHomeData().then((res) => {
      // console.log(res)
    })
    getHomeDatapost().then((res) => {
      // console.log(res)
    })

  }
} 
</script>

<style lang="less" scoped>
.avgcard{
  height: 300px;
  .shang{
    display: flex;
    align-items: center;
    .img-box{
      border-radius: 60%;
      overflow: hidden;
    }
    .font-box{
      margin-left: 40px;
    }
  }
  .xia{
    color:#7e7a7a;
    .logintime{
      margin-top: 15px;
    }
    .loginaddress{
      margin-top: 15px;
    }
  }
}
.shop-table{
  margin-top: 30px;
  height: 520px;
}
.orderdata{
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .card{
    margin-right: 20px;
    height: 80px;
    width: 30%;
    .icon{
      width: 30%;
      line-height: 80px;
      text-align: center;
      font-size: 30px;
      color: white;
    }
    .detail{
      height: 80px;
      margin-left: 20px;
      h3{
        margin: 15px;
      }
      h5{
        margin: 5px;
        color: #7e7a7a;
      }
    }
  }
}
.linechart{
  height: 330px;
  width: 94%;
  /deep/ .el-card__body{
    height: 95%;
  }
}
.barpie{
  width: 94%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .barchart{
    height: 300px;
    width: 48%;
    /deep/ .el-card__body{
      height: 100%;
    }
  }
  .piechart{
    height: 300px;
    width: 48%;
    /deep/ .el-card__body{
    height: 95%;
  }
  }
}
</style>